<template>
  <div>
    <div class="Edit_Div1"></div>
    <div class="NameEditCls">
      <el-row>
        <el-col :span="24">
          <div>
            <el-button style="float:left;" @click="$router.go(-1)" type="info" icon="el-icon-arrow-left" size="mini">返回
            </el-button>
            <h4 style="margin-left:10px;font-size:20px;float:left;">{{ProcessFkUserData.item.TypeName_CHS}}
            </h4>
          </div>
        </el-col>
      </el-row>

      <el-row class="borderRow">
        <br />
        <div v-for="(item, index) in ProcessView">
          <div style="line-height:35px;">
            <el-avatar style="float:left" :src="'data:image/jpeg;base64,'+item.ImagePath1"></el-avatar>
            <p style="font-weight:bold;color:#909399;">
              <span style="font-size:14px;padding-left:30px">{{item.item.DepartmentName}}:{{item.item.FullName}}</span>
            </p>
          </div>
          <div style="padding-left:40px;">

            <el-timeline :reverse="reverse1" style="padding-top:10px">
              <el-timeline-item placement="top" :timestamp="item.item.CreateDate|TimeFilter">

                <el-card>
                  <div>
                    <div style="padding:5px 0px 10px 0;border-bottom:1px solid rgb(170, 170, 170);">
                      <el-tag effect="dark" size="small" :style="'border-color:'+item.item.Visual"
                        :color="item.item.Visual">
                        {{item.item.StatusName_CHS}}</el-tag>
                    </div>
                    <p style="line-height:30px;padding:10px 0 10px 0px;">{{item.item.Note}}</p>
                  </div>
                </el-card>

              </el-timeline-item>
            </el-timeline>

          </div>
        </div>
      </el-row>

      <el-row class="borderRow2">

        <br />
        <div style="line-height:35px;">

          <el-avatar v-if="ProcessFkUserData.ImagePath1" style="float:left"
            :src="'data:image/jpeg;base64,'+ProcessFkUserData.ImagePath1"></el-avatar>
          <p style="font-weight:bold;color:#909399;">
            <span style="font-size:14px;padding-left:30px">申请人:{{ProcessFkUserData.item.FullName}}</span>
          </p>
        </div>

        <div style="padding-left:40px;">
          <el-timeline :reverse="reverse1" style="padding-top:10px">
            <el-timeline-item placement="top" :timestamp="ProcessFkUserData.item.CreateDate|TimeFilter">

              <el-card>
                <div>
                  <div style="padding:5px 0px 10px 0;border-bottom:1px solid rgb(170, 170, 170);">
                    <p style="font-weight:bold;font-size:18px;line-height:30px;padding:10px 0 10px 0px;">
                      {{ProcessFkUserData.item.Title}}</p>
                  </div>
                  <p style="line-height:30px;padding:10px 0 10px 0px;">{{ProcessFkUserData.item.Description}}</p>
                </div>
              </el-card>

            </el-timeline-item>
          </el-timeline>
        </div>

      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Edit_Div1 {
  height: 2px;
  background-color: rgb(180, 180, 180);
}
.borderRow {
  border-top: 1px solid rgb(170, 170, 170);
}
.NameEditCls {
  padding: 10px;
}
a {
  color: white;
  text-decoration: none;
}
.el-row {
  margin-bottom: 10px;
}
.el-form-item {
  width: 90%;
}
</style>

<script>
export default {
  data () {
    return {
      ProcessFkUserData: {},
      reverse1: true,
      reverse2: true,
      ProcessView: []
    }
  },
  methods: {
    ReadProcessData () {
      this.$axios({
        url: '/HrApi/ProcessMange/ProcessDataBinding',
        method: 'GET',
        params: {
          pk_Process: this.$route.query.id
        }
      }).then(res => {
        this.ProcessFkUserData = res.data.data;
        this.ProcessView = res.data.Twodata;
      })
    }
  },
  //过滤时间
  filters: {
    TimeFilter (t) {
      if (t === null) {
        return '无'
      }
      let dt = t.split('T').join(' ')
      if (dt.split('.').length > 1) {
        dt = dt.split('.')[0]
      }
      return dt
    }
  },
  mounted () {
    this.ReadProcessData();
  }
}
</script>